<template>
	<div class="app-container">
		<section class="todoapp">
			<header class="header">
				<h1>任务列表</h1>
				<img src="./assets/下.svg" alt="下拉" class="down-arrow" v-if="!allSelected" @click="handleAllSelect" />
				<img src="./assets/ok.svg" alt="下拉" class="down-arrow" v-if="allSelected" @click="handleAllSelect" />
				<input
					class="new-todo"
					autofocus=""
					v-model="newTodo"
					autocomplete="off"
					placeholder="什么需要去完成？"
					@keydown.enter="addTodo"
				/>
			</header>
			<section class="main">
				<ul class="todo-list">
					<li
						class="todo"
						:class="{ completed: todo.completed, editing: todo === editingTodo }"
						v-for="todo in todosFiltered"
						:key="todo.id"
						@dblclick="editTodo(todo, $event)"
					>
						<div class="view">
							<input type="checkbox" class="toggle" :id="todo.id" v-model="todo.completed" />
							<label :for="todo.id">{{ todo.title }}</label>
							<button class="destroy" @click="remove(todo)">X</button>
						</div>
						<input
							type="text"
							class="edit"
							v-model="todo.title"
							@blur="doneTodo(todo)"
							@keydown.enter="doneTodo(todo)"
							@keydown.escape="cancelEdit(todo)"
						/>
					</li>
				</ul>
			</section>
			<footer class="footer">
				<span class="todo-count">
					<strong>{{ todosLefted.length }}</strong>
					<span>项未完成</span>
				</span>
				<ul class="filters">
					<li><a href="#/all" :class="{ selected: visibility === 'all' }">全部</a></li>
					<li><a href="#/active" :class="{ selected: visibility === 'active' }">激活</a></li>
					<li><a href="#/completed" :class="{ selected: visibility === 'completed' }">完成</a></li>
				</ul>
				<button class="clear-completed" v-show="todosCompleted.length" @click="removeCompleted">
					清除所有已完成
				</button>
			</footer>
		</section>
	</div>
</template>

<script>
import { defineComponent } from 'vue'
import useTodoList from '@/compositions/useTodoList'
import useNewTodo from '@/compositions/useNewTodo'
import useFilter from '@/compositions/useFilter'
import useEditTodo from '@/compositions/useEditTodo'
import useRemovveTodo from './compositions/useRemovveTodo'
export default defineComponent({
	setup() {
		const { todos } = useTodoList()
		return {
			todos,
			...useNewTodo(todos),
			...useFilter(todos),
			...useEditTodo(todos),
			...useRemovveTodo(todos),
		}
	},
})
</script>

<style lang="less" scoped>
.app-container {
	width: 100%;
	height: 100%;
	position: fixed;
	display: flex;
	justify-content: center;
}
.down-arrow {
	position: absolute;
	left: 15px;
	bottom: 10px;
	width: 25px;
	height: 30px;
}
.todoapp {
	width: 50%;
	overflow-x: auto;
	.header {
		position: relative;
		h1 {
			width: 50%;
			margin: 20px auto;
			padding: 10px;
			text-align: center;
			color: brown;
			font-size: 3rem;
		}
		.new-todo {
			width: 100%;
			height: 50px;
			padding: 5px;
			text-indent: 50px;
			font-size: 1.5rem;
			color: #666;
			outline: none;
			border: none;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
		}
		.new-todo::placeholder {
			color: #ccc;
		}
	}
	.todo-list {
		width: 100%;
		.todo {
			width: 100%;
			height: 50px;
		}
		li {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
			.view {
				.toggle {
					margin-right: 2px;
				}
				.destroy {
					width: 30px;
					height: 25px;
					position: absolute;
					right: 15px;
					top: 15px;
					border: 1px solid #ccc;
					background-color: transparent;
					cursor: pointer;
				}
			}
			.edit {
				height: 100%;
				font-size: 20px;
				display: none;
				width: 100%;
			}
		}
		li.editing {
			.edit {
				display: block;
				padding: 5px;
			}
			.view {
				display: none;
			}
		}
		li.completed {
			text-decoration: line-through;
			color: #ccc;
		}
	}
}
.selected {
	border: 1px solid #ccc !important;
}
.clear-completed {
	border: 1px solid #ccc !important;
	padding: 5px;
	color: #666;
	cursor: pointer;
}
.footer {
	display: flex;
	align-items: center;
	color: #666;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
	gap: 100px;
	width: 100%;
	height: 50px;
	padding: 5px;
	.todo-count {
		margin-left: 20px;
	}
	a {
		color: #666;
		text-decoration: none;
		padding: 5px;
		border: 1px solid #fff;
	}
	.filters {
		display: flex;
		li {
			margin: 0 10px;
		}
	}
}
</style>
